<template>
	<view class="home">
		<view class="index">
			<!-- <view class="d_f  a-i-c header" v-if="!email" :class="email?'j_c_s_b':'j_c_c'">
				<view v-if="email"></view>
				<view class="header_text" @tap="trychat">try chatGPT</view>
				<view v-if="email">{{email}}</view>
			</view>
			<view class="d_f j_c_s_b nav" v-if="!email">
				<image src="../../static/ct_0026_logo小深色.png" mode="" class="logo"></image>
				<view class="d_f">
					<view class="size"  @tap="login">{{email?'logout':'login'}}</view>
					<view class="size" @tap="signature">project</view>
					<view class="size"  @tap="wallet">wallet</view>
					<view class="size" @tap="about">about</view>
				</view>
			</view> -->
			<view class="d_f j_c_s_b header">
				<image src="../../static/ct_0026_logo小深色.png" mode="" class="logo"></image>
					<view class="icon_size">AI QT</view>
				<view class="email">{{email}}</view>	
			</view>
			<view class="nav d_f j_c_s_b">
				<view class="size" @tap="trychat">CHATGPT</view>
				<view class="size" @tap="about">SORA</view>
				<view class="size" @tap="signature">PROJECT</view>
				<view class="size" @tap="wallet">WALLET</view>
				<view class="size" @tap="about">ABOUT</view>
				<view class="size" @tap="login">{{email?'LOGOUT':'LOGIN'}}</view>



			</view>
			<view class="videoContainer">
				<video class="fullscreenVideo" id="bgVid" :src="$config.imgUrl+url" :muted="true" :controls="false"
					object-fit="cover" :autoplay="true" :loop="true" webkit-playsinline="true" x-webkit-airplay="true"
					playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5"
					x5-video-player-fullscreen="true" preload="auto"></video>
				<view class="video_tips">join us in shaping the future of </view>
				<view class="video_tips1">technology.</view>
				<view class="switch" @tap="open">
					WATCH VIDEO
				</view>
			</view>
			<view class="box">
				<view class="title">Core Values</view>
				<view class="d_f j_c_s_b">
					<view class="width">
						<view class="size">Audacious</view>
						<view class="size1">We make big bets and are unafraid togo against established norms</view>
					</view>
					<view class="width">
						<view class="size">Thoughtful</view>
						<view class="size1">WWe tharoughly cansider the consequences of our wark and welcomne
							heterogeneity af thought</view>
					</view>
				</view>
				<view class="d_f j_c_s_b">
					<view class="width">
						<view class="size">Woprelentious</view>
						<view class="size1">We're undeterred by the "boring wurk" and not motiated to prove we have the
							best ideas</view>
					</view>
					<view class="width">
						<view class="size">Pagmalic & lmpac-Driver</view>
						<view class="size1">We're a comnpeny of buiders who care deeply about realworld implications and
							epplications</view>
					</view>
				</view>
				<view class="d_f j_c_s_b">
					<view class="width">
						<view class="size">Collaborative</view>
						<view class="size1">Many of our biggest advances graw out of work done across multiple teams
						</view>
					</view>
					<view class="width">
						<view class="size">Grontonented</view>
						<view class="size1">We believe in the power oft feedback and encourage a mindset of continuous
							learning and growth</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="d_f j_c_s_b name">
					<view>OpenAI @ 2015-2024 </view>
					<view>Privacy Policy </view>
					<view>Terms of Use</view>
				</view>
				<view class="iconList">
					<!-- <image src="../../static/ct_0005_icon组1.png" mode="" class="icon"></image>
					<image src="../../static/ct_0004_icon组2.png" mode="" class="icon1"></image>
					<image src="../../static/ct_0003_icon组3.png" mode="" class="icon2"></image>
					<image src="../../static/ct_0002_icon组4.png" mode="" class="icon3"></image>
					<image src="../../static/ct_0001_icon组5.png" mode="" class="icon4"></image>
					<image src="../../static/ct_0000_icon组6.png" mode="" class="icon5"></image> -->
					<image src="../../static/3.png" mode="" class="a"></image>
					<image src="../../static/4.png" mode="" class="a m_l_5"></image>
					<image src="../../static/5.png" mode="" class="a m_l_5"></image>
					<image src="../../static/6.png" mode="" class="a m_l_5"></image>
					<image src="../../static/8.png" mode="" class="a m_l_5"></image>
					<image src="../../static/9.png" mode="" class="a m_l_5"></image>
					<image src="../../static/10.png" mode="" class="a m_l_5"></image>
				</view>
			</view>
		</view>
		<u-popup v-model="popup" mode="center" border-radius="8">
			<view class="dialog">
				<view class="dia_title">You are currently a tourist, please purchase a test key in order to participatein the OPAl AlQT project testing work and chatGPT.</view>
				<view class="m_t_10">Please enter the transfer wallet addres</view>
				<u-input v-model="value" :border="true" class="m_t_16" placeholder="Please enter" />
				<view class="d_f j_c_s_b">
					<view class="d_f j_c_c a_i_c btn" @tap="popup=false">Later</view>
					<view class="d_f j_c_c a_i_c btn" @tap="submit">Pay now </view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				url: '',
				is_partake: 0,
				email: "",
				wallet_rule_id: 0,
				show: true,
				popup: false,
				value: ''
			}
		},
		components: {

		},
		methods: {
			open() {
				if (!this.flag) {
					this.videoContext.play()
					this.flag = true
				} else {
					this.videoContext.pause()
					this.flag = false
				}

			},
			login() {
				uni.navigateTo({
					url: '/pages/index/login'
				})
			},
			//获取首页视频
			getData() {
				this.$api.homeVideo().then(res => {
					this.url = res.data
				})
			},
			//跳转聊天界面判断是否登录
			trychat() {
				if (!this.show) {
					// this.popup = true
					this.submit()
					return
				}
				let url = ''
				if (!uni.getStorageSync('data')) {
					url = '/pages/index/denied'
				} else {
					url = '/pages/index/trychat'
				}
				uni.navigateTo({
					url: url
				})
			},
			wallet() {
				if (!this.show) {
					// this.popup = true
					this.submit()
					return
				}
				if (!uni.getStorageSync('data')) {
					uni.navigateTo({
						url: '/pages/index/login'
					})
				} else {
					if (this.wallet_rule_id > 0) {
						uni.navigateTo({
							url: '/pages/index/myWallet'
						})
					} else {
						uni.navigateTo({
							url: '/pages/index/registratio'
						})
					}
				}
			},
			about() {
				if (!this.show) {
					// this.popup = true
					this.submit()
					return
				}
				if (!uni.getStorageSync('data')) {
					uni.navigateTo({
						url: '/pages/index/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/index/about?type=2&name=About'
				})
			},
			signature() {
				if (!this.show) {
					// this.popup = true
					this.submit()
					return
				}
				if (!uni.getStorageSync('data')) {
					uni.navigateTo({
						url: '/pages/index/login'
					})
					return
				}
				if (this.is_partake == 0) {
					uni.navigateTo({
						url: '/pages/index/signature'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/signIn'
					})
				}

			},
			verifyWallet() {
				this.$api.checkTickets().then(res => {
					this.show = res.data == 0 ? false : true
				})
			},
			submit() {
				// if (!this.value) {
				// 	this.tips('Please enter the transfer wallet address')
				// 	return
				// }
				this.$api.getTickets().then(res => {
					// this.show=res.data==0?false:true
					uni.setStorageSync('from', this.value)
					uni.setStorageSync('fee', res.data)
					uni.navigateTo({
						url: '/pages/index/admissionFee'
					})
				})
			}
		},
		onShow() {
			if (uni.getStorageSync('data')) {
				this.email = uni.getStorageSync('data').email
				this.is_partake = uni.getStorageSync('data').is_partake
				this.wallet_rule_id = uni.getStorageSync('data').wallet_rule_id
			} else {
				this.email = ''
				this.wallet_rule_id = 0
				this.is_partake = 0
			}
			this.getData()
			this.verifyWallet()
		},
		onLoad(options) {

		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('bgVid', )
		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.home {
		width: 100%;
		min-height: 100%;
		background: rgb(239, 237, 238);

		.index {
			width: 100%;
			padding-bottom: 32rpx;

			.header {
				padding-top: 32rpx;
				font-weight: 700;
				width: calc(100% - 64rpx);
				margin-left: 32rpx;

				.logo {
					width: 133rpx;
					height: 42rpx;
				}

				.icon_size {
					margin-left: 28rpx;
					font-size: 22rpx;
				}

				.email {
					font-size: 24rpx;
				}
			}

			.nav {
				margin-top: 32rpx;
				width: calc(100% - 64rpx);
				margin-left: 32rpx;

				.size {
					font-size: 24rpx;
					font-weight: 700;
				}
			}

			.videoContainer {
				width: 100%;
				height: 450rpx;
				position: relative;

				.fullscreenVideo {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					margin-top: 32rpx;
				}

				.video_tips {
					position: absolute;
					left: 32rpx;
					bottom: 140rpx;
					color: #fff;
				}

				.video_tips1 {
					position: absolute;
					left: 32rpx;
					bottom: 100rpx;
					color: #fff;
				}

				.switch {
					position: absolute;
					left: 32rpx;
					bottom: 0rpx;
					padding: 10rpx;
					background: rgb(101, 186, 144);
					border-radius: 40rpx;
					font-size: 24rpx;
					font-weight: 700;
					color: #fff;
				}
			}

			.box {
				background: rgb(255, 128, 73);
				padding: 32rpx;
				border-radius: 20rpx;
				margin-top: 64rpx;

				.title {
					color: #fff;
					font-weight: 700;
					font-size: 36rpx;
				}

				.width {
					width: 49%;
					color: #fff;

					.size {
						font-weight: 700;
						margin-top: 20rpx;
						font-size: 28rpx;
					}

					.size1 {
						font-size: 20rpx;
						margin-top: 20rpx;
					}
				}
			}

			.bottom {
				padding: 32rpx;
				background: rgb(101, 186, 144);
				border-radius: 20rpx;
				margin-top: 32rpx;

				.name {
					font-size: 24rpx;
					color: #fff;
				}

				.iconList {
					margin-top: 32rpx;

					.icon {
						width: 32rpx;
						height: 27rpx;
					}

					.icon1 {
						width: 34rpx;
						height: 22rpx;
						margin-left: 20rpx;
					}

					.icon2 {
						width: 32rpx;
						height: 29rpx;
						margin-left: 20rpx;
					}

					.icon3 {
						width: 37rpx;
						height: 19rpx;
						margin-left: 20rpx;
					}

					.icon4 {
						width: 27rpx;
						height: 26rpx;
						margin-left: 20rpx;
					}

					.icon5 {
						width: 31rpx;
						height: 29rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.dialog {
		width: 600rpx;
		background: #fff;
		padding: 32rpx;
		border-radius: 8px;
	}

	.dia_title {
		font-size: 24rpx;
		font-weight: 700;
		text-align: center;
	}

	.btn {
		width: 200rpx;
		border-radius: 20rpx;
		background: rgb(101, 186, 144);
		color: #FFFFFF;
		height: 80rpx;
		margin-top: 32rpx;
	}
	.a{
		width: 40rpx;
		height: 40rpx;
		background-size: 100% 100%;
	}
</style>